var ycTcityList = [

    {

        'code': 'B',

        'cityList': ["北京", "保定", "包头"]

    }, {

        'code': 'C',

        'cityList': ["沧州", "长春", "长沙", "常德", "成都", "重庆"]

    }, {

        'code': 'D',

        'cityList': ["大连", "大庆", "德阳", "东营"]

    }, {

        'code': 'F',

        'cityList': ["佛山", "福州", "抚顺", "阜阳"]

    }, {

        'code': 'G',

        'cityList': ['广州', '贵阳']

    }, {

        'code': 'H',

        'cityList': ["哈尔滨", "海口", "杭州", "合肥", "河源", "呼和浩特", "湖州", "惠州"]

    }, {

        'code': 'J',

        'cityList': ["吉林", "济南", "嘉兴", "江门", "金华", "锦州", "荆州", "九寨沟县"]

    }, {

        'code': 'K',

        'cityList': ["昆明"]

    }, {

        'code': 'L',

        'cityList': ["廊坊", "龙岩", "临沂", "洛阳", "陵水", "乐山", "六盘水", "兰州"]

    }, {

        'code': 'M',

        'cityList': ["绵阳"]

    }, {

        'code': 'N',

        'cityList': ["南京", "南通", "宁波", "南昌", "南阳", "南宁"]

    }, {

        'code': 'P',

        'cityList': ["莆田"]

    }, {

        'code': 'Q',

        'cityList': ["全国", "泉州", "青岛"]

    }, {

        'code': 'R',

        'cityList': ["日照"]

    }, {

        'code': 'S',

        'cityList': ["石家庄", "沈阳", "上海", "苏州", "绍兴", "商丘", "深圳", "三亚"]

    }, {

        'code': 'T',

        'cityList': ["天津", "唐山", "太原", "台州", "泰安"]

    }, {

        'code': 'W',

        'cityList': ["无锡", "温州", "芜湖", "潍坊", "武汉", "万宁", "乌鲁木齐"]

    },

    {

        'code': 'X',

        'cityList': ["西安", "徐州", "厦门", "西宁", "湘潭"]

    }, {

        'code': 'Y',

        'cityList': ["扬州", "盐城", "烟台", "宜昌", "榆林", "银川"]

    }, {

        'code': 'Z',

        'cityList': ["张家口", "舟山", "淄博", "郑州", "株洲", "张家界", "中山", "珠海", "湛江", "遵义"]

    }

]

var ycTcitys = document.getElementsByClassName('ycTcitys')
// console.log(ycTcitys[0]);
ycTcityList.forEach((v, k) => {
    let ul = document.createElement('ul')
    ul.id = `ycTcityTopFont${v.code}`
    let in1 = document.createElement('li')
    in1.innerText = v.code
    ul.appendChild(in1)
    v.cityList.forEach((i, j) => {
        let in2n = document.createElement('li')
        in2n.classList = 'ycGetCity'
        in2n.innerText = i
        ul.appendChild(in2n)
        // console.log(i);
    })
    ycTcitys[0].appendChild(ul)
})

function ycGoCitys(x) {
    var fonts = ["B", "C", "D", "F", "G", "H", "J", "K", "L", "M", "N", "P", "Q", "R", "S", "T", "W", "X", "Y", "Z"]
    var citylist = document.getElementsByClassName('ycTcitys')[0]
    var cityFont = document.getElementById(`ycTcityTopFont${x}`)
    // console.log(cityFont);
    // console.log(cityFont.offsetTop);
    //offsetTop从元素本身到最后一个定位过的父元素的高度差
    // citylist.scroll(0, cityFont.offsetTop)//瞬间切换
    citylist.scroll({ top: `${cityFont.offsetTop}`, behavior: "smooth" })//滚动
    var Fontlist = Array.from(document.getElementsByClassName('ycTcityFonts')[0].lastElementChild.children)
    Fontlist.forEach((v, k) => {
        v.style.backgroundColor = '';
        v.style.color = '';
    })
    // console.log(Fontlist[fonts.indexOf(x)])
    Fontlist[fonts.indexOf(x)].style.backgroundColor = "#31c27c";
    Fontlist[fonts.indexOf(x)].style.color = "white";
}

var ycGetCity = [...document.getElementsByClassName("ycGetCity")]
ycGetCity.forEach((v, k) => {
    v.addEventListener("click", function () {
        // alert(`已提取城市列表，但没有【${this.innerText}】的票务json文件`);//目前提取了一小部分了
        showcityCards(this.innerText)
        $('.ycTcitySelecter')[0].firstElementChild.innerText = (this.innerText)
        // console.log($('.ycTcitySelecter')[0].firstElementChild.innerText);
    })
})

var ycTcitySelecter = [...document.getElementsByClassName('ycTcitySelecter')][0];
// console.log(ycTcitySelecter);
var ycTcityBox = document.getElementsByClassName('ycTcityBox')[0];
// console.log(ycTcityBox);
ycTcitySelecter.onclick = function () {
    // console.log(ycTcityBox.style.display);
    ycTcityBox.style.display = ycTcityBox.style.display == "block" ? "none" : "block";
    window.event.cancelBubble = true;//阻止事件冒泡到window
}

ycTcityBox.onclick = function () {
    window.event.cancelBubble = true;//阻止事件冒泡
}

window.addEventListener('click', function () {
    ycTcityBox.style.display = "none"
})

function GetTajax(url, data = {}, type = 'get') {
    return new Promise((resolve, reject) => {
        $.ajax({
            url,
            data,
            type,
            dataType: "JSON",
            success(res) {
                resolve(res)
            },
            error(e) {
                reject(e)
            }

        })
    })
}


var i = 0;//用来计算上架的图片序列
function showcityCards(x = "武汉") {
    GetTajax(`ycPatch/musics.json`)
        .then(res => {
            {
                i = 0
                res.getFirstData.data.classes[3].showlist.forEach((v, k) => {
                    if (x == v.city_name) {
                        if (i == 0) {
                            // console.log($('.mptp')[0].innerHTML);
                            ($('.mptp')[0].style.backgroundImage) = (`url(${v.pic_url})`)
                            $('.mptp')[0].innerHTML = (`						<div class="tpgg">
							<div>${cutShowName(v.show_name)}</div>
							<div style="clear: both;" id=""> </div>
							<div>￥ ${v.min_price / 100}<span style="font-size: 15px;"> 起</span></div>
							<div class="cpgg11"><i class="iconfont icon-lvzuanvip">立减</i></div>
						</div>`)
                            i++
                        }
                        else {
                            if (i < 5) {
                                // console.log($('.mptp2>ul')[0].children[i - 1].innerHTML)
                                $('.mptp2>ul')[0].children[i - 1].innerHTML = `
								<div style="background-image:url(${v.pic_url})"></div>
								<div class="xxc1">
									<div>
										<div style="font-size: 16px;">${cutShowName(v.show_name)}</div>
										<br>
										<div style="font-size: 12px;">${(v.show_date + '').slice(0, 4) + "." + (v.show_date + '').slice(4, 6) + "." + (v.show_date + '').slice(6, 8)}</div>
										<div style="font-size: 12px;">${v.hall_name}</div>
									</div>
									<div class="xxc2">
										<div style="color: green;">￥ ${v.min_price / 100}<span style="font-size: 15px;"> 起</span></div>
										<div class="xxc222"><i class="iconfont icon-lvzuanvip">立减</i></div>
									</div>
								</div>`
                                i++
                            }
                        }
                    }
                    if (i < 5 && k == res.getFirstData.data.classes[3].showlist.length - 1) {   //没有更多数据时填充空图片
                        // console.log(i);
                        if (i == 0) {
                            // console.log($('.mptp')[0].innerHTML);
                            ($('.mptp')[0].style.backgroundImage) = (`url(ycPatch/imgs/NoResources.bmp)`)
                            $('.mptp')[0].innerHTML = (`<div class="tpgg">
                                    <div>无更多演出</div>
                                    <div style="clear: both;" id=""> </div>
                                    <div>￥ 10000<span style="font-size: 15px;"> 起</span></div>
                                    <div class="cpgg11"><i class="iconfont icon-lvzuanvip">立减</i></div>
                                </div>`)
                            i++
                        }
                        for (j = i; j < 5; j++) {
                            $('.mptp2>ul')[0].children[j - 1].innerHTML = `
								<div style="background-image:url(ycPatch/imgs/NoResources.bmp)"></div>
								<div class="xxc1">
									<div>
										<div style="font-size: 16px;">无更多演出</div>
										<br>
										<div style="font-size: 12px;">1970.01.01</div>
										<div style="font-size: 12px;">无地点</div>
									</div>
									<div class="xxc2">

										<div style="color: green;">￥ 10000<span style="font-size: 15px;"> 起</span></div>
										<div class="xxc222"><i class="iconfont icon-lvzuanvip">立减</i></div>
									</div>
								</div>`
                        }
                    }
                })
                i = 0
                res.getFirstData.data.classes[4].showlist.forEach((v, k) => {
                    if (x == v.city_name) {
                        if (i == 0) {
                            // console.log($('.mptp')[0].innerHTML);
                            ($('.mptp')[1].style.backgroundImage) = (`url(${v.pic_url})`)
                            $('.mptp')[1].innerHTML = (`						<div class="tpgg">
							<div>${cutShowName(v.show_name)}</div>
							<div style="clear: both;" id=""> </div>
							<div>￥ ${v.min_price / 100}<span style="font-size: 15px;"> 起</span></div>
							<div class="cpgg11"><i class="iconfont icon-lvzuanvip">立减</i></div>
						</div>`)
                            i++
                        }
                        else {
                            if (i < 5) {
                                // console.log($('.mptp2>ul')[1].children[i - 1].innerHTML)
                                $('.mptp2>ul')[1].children[i - 1].innerHTML = `
								<div style="background-image:url(${v.pic_url})"></div>
								<div class="xxc1">
									<div>
										<div style="font-size: 16px;">${cutShowName(v.show_name)}</div>
										<br>
										<div style="font-size: 12px;">${(v.show_date + '').slice(0, 4) + "." + (v.show_date + '').slice(4, 6) + "." + (v.show_date + '').slice(6, 8)}</div>
										<div style="font-size: 12px;">${v.hall_name}</div>
									</div>
									<div class="xxc2">

										<div style="color: green;">￥ ${v.min_price / 100}<span style="font-size: 15px;"> 起</span></div>
										<div class="xxc222"><i class="iconfont icon-lvzuanvip">立减</i></div>


									</div>
								</div>`
                                i++
                            }
                        }
                    }
                    if (i < 5 && k == res.getFirstData.data.classes[4].showlist.length - 1) {   //没有更多数据时填充空图片
                        // console.log(i);
                        if (i == 0) {
                            // console.log($('.mptp')[0].innerHTML);
                            ($('.mptp')[1].style.backgroundImage) = (`url(ycPatch/imgs/NoResources.bmp)`)
                            $('.mptp')[1].innerHTML = (`<div class="tpgg">
                                            <div>无更多演出</div>
                                            <div style="clear: both;" id=""> </div>
                                            <div>￥ 10000<span style="font-size: 15px;"> 起</span></div>
                                            <div class="cpgg11"><i class="iconfont icon-lvzuanvip">立减</i></div>
                                        </div>`)
                            i++
                        }
                        for (j = i; j < 5; j++) {
                            $('.mptp2>ul')[1].children[j - 1].innerHTML = `
                                        <div style="background-image:url(ycPatch/imgs/NoResources.bmp)"></div>
                                        <div class="xxc1">
                                            <div>
                                                <div style="font-size: 16px;">无更多演出</div>
                                                <br>
                                                <div style="font-size: 12px;">19700101</div>
                                                <div style="font-size: 12px;">无地点</div>
                                            </div>
                                            <div class="xxc2">
        
                                                <div style="color: green;">￥ 10000<span style="font-size: 15px;"> 起</span></div>
                                                <div class="xxc222"><i class="iconfont icon-lvzuanvip">立减</i></div>
                                            </div>
                                        </div>`
                        }
                    }
                })
                i = 0
                res.getFirstData.data.classes[5].showlist.forEach((v, k) => {
                    if (x == v.city_name) {
                        if (i == 0) {
                            // console.log($('.mptp')[0].innerHTML);
                            ($('.mptp')[2].style.backgroundImage) = (`url(${v.pic_url})`)
                            $('.mptp')[2].innerHTML = (`						<div class="tpgg">
							<div>${cutShowName(v.show_name)}</div>
							<div style="clear: both;" id=""> </div>
							<div>￥ ${v.min_price / 100}<span style="font-size: 15px;"> 起</span></div>
							<div class="cpgg11"><i class="iconfont icon-lvzuanvip">立减</i></div>
						</div>`)
                            i++
                        }
                        else {
                            if (i < 5) {
                                // console.log($('.mptp2>ul')[1].children[i - 1].innerHTML)
                                $('.mptp2>ul')[2].children[i - 1].innerHTML = `
								<div style="background-image:url(${v.pic_url})"></div>
								<div class="xxc1">
									<div>
										<div style="font-size: 16px;">${cutShowName(v.show_name)}</div>
										<br>
										<div style="font-size: 12px;">${(v.show_date + '').slice(0, 4) + "." + (v.show_date + '').slice(4, 6) + "." + (v.show_date + '').slice(6, 8)}</div>
										<div style="font-size: 12px;">${v.hall_name}</div>
									</div>
									<div class="xxc2">

										<div style="color: green;">￥ ${v.min_price / 100}<span style="font-size: 15px;"> 起</span></div>
										<div class="xxc222"><i class="iconfont icon-lvzuanvip">立减</i></div>


									</div>
								</div>`
                                i++
                            }
                        }
                    }
                    if (i < 5 && k == res.getFirstData.data.classes[5].showlist.length - 1) {   //没有更多数据时填充空图片
                        // console.log(i);
                        if (i == 0) {
                            // console.log($('.mptp')[0].innerHTML);
                            ($('.mptp')[2].style.backgroundImage) = (`url(ycPatch/imgs/NoResources.bmp)`)
                            $('.mptp')[2].innerHTML = (`<div class="tpgg">
                                            <div>无更多演出</div>
                                            <div style="clear: both;" id=""> </div>
                                            <div>￥ 10000<span style="font-size: 15px;"> 起</span></div>
                                            <div class="cpgg11"><i class="iconfont icon-lvzuanvip">立减</i></div>
                                        </div>`)
                            i++
                        }
                        for (j = i; j < 5; j++) {
                            $('.mptp2>ul')[2].children[j - 1].innerHTML = `
                                        <div style="background-image:url(ycPatch/imgs/NoResources.bmp)"></div>
                                        <div class="xxc1">
                                            <div>
                                                <div style="font-size: 16px;">无更多演出</div>
                                                <br>
                                                <div style="font-size: 12px;">1970.1.1</div>
                                                <div style="font-size: 12px;">无地点</div>
                                            </div>
                                            <div class="xxc2">
        
                                                <div style="color: green;">￥ 10000<span style="font-size: 15px;"> 起</span></div>
                                                <div class="xxc222"><i class="iconfont icon-lvzuanvip">立减</i></div>
                                            </div>
                                        </div>`
                        }
                    }
                })
            }
        })
}

function cleanALLshows(params) {

}

function cutShowName(x = "abcdefghijklmnopqrstuvwxyz") {    //把过长的演出名省略
    let getback = ''
    for (k = 0; k < 24; k++) { x[k] ? getback += x[k] : null }
    if (getback.length >= 24) {
        return "" + getback + "..."
    }
    else {
        return getback
    }
}